<template>
  <div class="department-info-page">
    <el-card class="main-card">
      <template #header>
        <div class="header-title unified-title">科室信息管理</div>
      </template>
      <div class="section-title unified-section-title" style="margin-top:24px;display:flex;align-items:center;justify-content:space-between;">
        <span>门诊科室</span>
        <el-button type="primary" size="default" @click="addLevel1">新增一级科室</el-button>
      </div>
      <el-input v-model="search" placeholder="搜索一级/二级科室" clearable class="search-input unified-input" />
      <div class="dept-card-list unified-list-area">
        <el-card v-for="dept in filteredTreeData" :key="dept.label" class="dept-card simple-card unified-subcard">
          <div class="dept-card-header simple-header unified-subheader">
            <div class="dept-card-icon unified-icon">
              <el-icon color="#90caf9" size="24"><OfficeBuilding /></el-icon>
            </div>
            <span class="dept-card-title simple-title unified-card-title">{{ dept.label }}</span>
            <div class="dept-card-actions simple-actions unified-actions" style="gap:8px;">
              <el-button size="small" type="primary" @click.stop="addLevel2(dept)">
                <el-icon><Plus /></el-icon> 新增
              </el-button>
              <el-button size="small" type="info" @click.stop="editLevel1(dept)">
                <el-icon><Edit /></el-icon> 编辑
              </el-button>
              <el-button size="small" type="danger" @click.stop="removeLevel1(dept)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
          </div>
          <div class="dept-tags simple-tags unified-tags">
            <el-tag
              v-for="sub in dept.children"
              :key="sub.label"
              class="dept-tag simple-tag unified-tag"
              @click="showDetail(sub)"
              :style="tagStyle(sub.label)"
              effect="plain"
            >
              <span class="dept-tag-label unified-tag-label">{{ sub.label }}</span>
              <el-tooltip content="编辑" placement="top">
                <el-button size="small" type="info" plain style="margin-left:6px;" @click.stop="editLevel2(sub)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="small" type="danger" plain style="margin-left:2px;" @click.stop="removeLevel2(sub)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </el-tag>
            <span v-if="!dept.children || dept.children.length === 0" class="no-sub unified-empty">暂无二级科室</span>
          </div>
        </el-card>
      </div>
      <!-- 编辑/新增弹窗 -->
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400px" class="unified-dialog">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="一级科室" v-if="editType==='level1'">
            <el-input v-model="editForm.label" class="unified-input" />
          </el-form-item>
          <el-form-item label="二级科室" v-if="editType==='level2'">
            <el-input v-model="editForm.label" class="unified-input" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible=false" class="unified-btn">取消</el-button>
          <el-button type="primary" @click="saveEdit" class="unified-btn">保存</el-button>
        </template>
      </el-dialog>
      <!-- 详情弹窗 -->
      <el-dialog v-model="detailVisible" title="科室详情" width="400px" class="unified-dialog">
        <div v-if="detailDept">
          <div><b>科室名称：</b>{{ detailDept.label }}</div>
          <div style="margin-top:10px;"><b>简介：</b>暂无详细信息，可在此补充。</div>
        </div>
        <template #footer>
          <el-button @click="detailVisible=false" class="unified-btn">关闭</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, OfficeBuilding } from '@element-plus/icons-vue'
const search = ref('')
const emergency = ref<any>(null)
const outpatient = ref<any[]>([])
const treeData = ref<any[]>([])
const treeProps = { children: 'children', label: 'label' }

// 编辑弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editForm = ref({ label: '' })
const editType = ref<'level1'|'level2'>('level1')
let editNode: any = null
let editParent: any = null

// 详情弹窗
const detailVisible = ref(false)
const detailDept = ref<any>(null)

const filteredTreeData = computed(() => {
  if (!search.value) return treeData.value
  return treeData.value
    .map((item: any) => {
      const children = (item.children || []).filter((sub: any) => sub.label.includes(search.value))
      if (item.label.includes(search.value) || children.length) {
        return { ...item, children }
      }
      return null
    })
    .filter(Boolean)
})

function showDetail(node: any) {
  detailDept.value = node
  detailVisible.value = true
}
function addLevel1() {
  dialogTitle.value = '新增一级科室'
  editType.value = 'level1'
  editForm.value = { label: '' }
  editNode = null
  dialogVisible.value = true
}
function addLevel2(parent: any) {
  dialogTitle.value = '新增二级科室'
  editType.value = 'level2'
  editForm.value = { label: '' }
  editParent = parent
  editNode = null
  dialogVisible.value = true
}
function editLevel1(node: any) {
  dialogTitle.value = '编辑一级科室'
  editType.value = 'level1'
  editForm.value = { label: node.label }
  editNode = node
  dialogVisible.value = true
}
function editLevel2(node: any) {
  dialogTitle.value = '编辑二级科室'
  editType.value = 'level2'
  editForm.value = { label: node.label }
  editNode = node
  dialogVisible.value = true
}
function removeLevel1(node: any) {
  if (node.children && node.children.length > 0) {
    ElMessage.warning('请先删除该一级科室下的所有二级科室！')
    return
  }
  ElMessageBox.confirm('确定要删除该一级科室吗？', '删除确认', {
    type: 'warning',
    confirmButtonText: '删除',
    cancelButtonText: '取消',
  }).then(() => {
    treeData.value = treeData.value.filter((item: any) => item !== node)
    ElMessage.success('已删除')
  })
}
function removeLevel2(node: any) {
  ElMessageBox.confirm('确定要删除该二级科室吗？', '删除确认', {
    type: 'warning',
    confirmButtonText: '删除',
    cancelButtonText: '取消',
  }).then(() => {
    for (const item of treeData.value) {
      if (item.children) {
        item.children = item.children.filter((sub: any) => sub !== node)
      }
    }
    ElMessage.success('已删除')
  })
}
function saveEdit() {
  if (editType.value === 'level1') {
    if (editNode) {
      editNode.label = editForm.value.label
    } else {
      treeData.value.push({ label: editForm.value.label, children: [] })
    }
  } else if (editType.value === 'level2') {
    if (editNode) {
      editNode.label = editForm.value.label
    } else if (editParent) {
      if (!editParent.children) editParent.children = []
      editParent.children.push({ label: editForm.value.label })
    }
  }
  dialogVisible.value = false
  ElMessage.success('保存成功')
}

function tagStyle(label: string) {
  // 柔和纯色池
  const colors = [
    { bg: '#e3f2fd', color: '#1976d2' }, // 浅蓝
    { bg: '#e8f5e9', color: '#388e3c' }, // 浅绿
    { bg: '#fff3e0', color: '#f57c00' }, // 浅橙
    { bg: '#f3e5f5', color: '#8e24aa' }, // 浅紫
    { bg: '#e0f7fa', color: '#00838f' }, // 浅青
    { bg: '#ffebee', color: '#c62828' }  // 浅红
  ]
  let hash = 0
  for (let i = 0; i < label.length; i++) hash += label.charCodeAt(i)
  const c = colors[hash % colors.length]
  return {
    background: c.bg,
    color: c.color,
    border: `1px solid ${c.bg}`,
    'box-shadow': '0 1px 4px rgba(25,118,210,0.04)'
  }
}

onMounted(async () => {
  try {
    const res = await fetch('/1.json')
    const json = await res.json()
    emergency.value = json.departments.emergency
    outpatient.value = json.departments.outpatient
    // 构建树结构
    treeData.value = outpatient.value.map((item: any) => ({
      label: item.level1,
      children: item.level2.map((sub: string) => ({ label: sub }))
    }))
  } catch (e) {
    ElMessage.error('科室数据加载失败')
  }
})
</script>
<style scoped>
.department-info-page {
  background: #f6fafd;
  min-height: 100vh;
  padding: 0;
}
.main-card {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 18px 18px;
  border: 1px solid #e3eaf2;
  background: #fff;
  margin: 0;
}
.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1976d2;
  letter-spacing: 1px;
}
.section-title {
  font-size: 1.18rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.emergency-desc {
  color: #888;
  margin-bottom: 10px;
}
.emergency-sections {
  margin-bottom: 10px;
}
.emergency-card {
  border-radius: 12px;
  margin-bottom: 12px;
}
.emergency-section-title {
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 6px;
}
.emergency-items {
  padding-left: 18px;
  color: #444;
  font-size: 0.98rem;
}
.search-input {
  width: 320px;
  margin: 18px 0 12px 0;
}
.dept-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.dept-card {
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.07);
  padding: 22px 22px 16px 22px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fafdff;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  border: 1px solid #e3eaf2;
  min-width: 0;
  word-break: break-all;
  overflow: visible;
}
.dept-card:hover {
  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.13);
  transform: translateY(-2px) scale(1.02);
}
.dept-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  gap: 16px;
}
.dept-card-icon {
  margin-right: 8px;
  font-size: 32px;
  display: flex;
  align-items: center;
}
.dept-card-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: #1976d2;
  flex: 1;
  letter-spacing: 1px;
}
.dept-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.action-icon {
  font-size: 1.25em;
  vertical-align: middle;
}
.action-btn {
  box-shadow: none !important;
  border: none !important;
  color: #fff !important;
  font-weight: bold;
  margin-left: 2px;
  margin-right: 2px;
  transition: background 0.18s, color 0.18s, border 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-add {
  background: #42a5f5 !important;
}
.action-add:hover {
  background: #1976d2 !important;
}
.action-edit {
  background: #ffa726 !important;
}
.action-edit:hover {
  background: #f57c00 !important;
}
.action-del {
  background: #ef5350 !important;
}
.action-del:hover {
  background: #c62828 !important;
}
.dept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  margin-left: 40px;
  flex-shrink: 0;
  min-width: 0;
}
.dept-tags-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dept-tag {
  font-size: 1rem;
  padding: 5px 18px 5px 14px;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e3eaf2;
  background: #e3f2fd;
  color: #1976d2;
  transition: box-shadow 0.18s, background 0.18s, color 0.18s;
  box-shadow: 0 1px 4px rgba(25,118,210,0.04);
  position: relative;
}
.dept-tag-label {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.dept-tag:hover {
  filter: none;
  background: #bbdefb !important;
  color: #0d47a1 !important;
  box-shadow: 0 2px 8px rgba(25,118,210,0.10);
}
.tag-edit, .tag-delete {
  font-size: 1.25em;
  margin-left: 10px;
  margin-right: 2px;
  cursor: pointer;
  opacity: 1;
  vertical-align: middle;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tag-edit {
  color: #ffa726 !important;
}
.tag-edit:hover {
  color: #f57c00 !important;
}
.tag-delete {
  color: #ef5350 !important;
}
.tag-delete:hover {
  color: #c62828 !important;
}
.tag-fade-enter-active, .tag-fade-leave-active {
  transition: all 0.25s cubic-bezier(.55,0,.1,1);
}
.tag-fade-enter-from, .tag-fade-leave-to {
  opacity: 0;
  transform: scale(0.85);
}
.no-sub {
  color: #bbb;
  font-size: 1.02rem;
  margin-left: 40px;
  text-align: center;
  width: 100%;
  display: block;
  padding: 18px 0 8px 0;
}
.simple-card {
  background: #fff !important;
  border-radius: 12px;
  box-shadow: none !important;
  border: 1px solid #f0f1f3;
  padding: 18px 18px 10px 18px;
  min-width: 0;
  word-break: break-all;
  overflow: visible;
}
.simple-header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.simple-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #222;
  flex: 1;
}
.simple-actions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}
.simple-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  margin-left: 36px;
}
.simple-tag {
  background: #f5f7fa !important;
  color: #333 !important;
  border: 1px solid #e3eaf2 !important;
  font-size: 0.98rem;
  padding: 3px 12px 3px 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tag-edit-btn, .tag-delete-btn {
  margin-left: 6px;
  padding: 0 4px;
  font-size: 0.97em;
  color: #888;
  vertical-align: middle;
}
.tag-edit-btn:hover, .tag-delete-btn:hover {
  color: #1976d2;
  background: none;
}
.unified-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1976d2;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.unified-section-title {
  font-size: 1.18rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.unified-desc {
  color: #888;
  margin-bottom: 10px;
}
.unified-row {
  margin-bottom: 10px;
}
.unified-subcard {
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #e3eaf2;
  background: #fafdff;
}
.unified-subtitle {
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 6px;
  font-size: 1.05rem;
}
.unified-list {
  padding-left: 18px;
  color: #444;
  font-size: 0.98rem;
}
.unified-divider {
  margin: 32px 0 18px 0;
  border-top: 1.5px solid #e3eaf2 !important;
}
.unified-btn {
  border-radius: 6px !important;
  font-size: 0.98em !important;
  padding: 0 10px !important;
  min-width: 0;
}
.unified-input {
  width: 320px;
  margin: 18px 0 12px 0;
  border-radius: 6px;
}
.unified-list-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.unified-subheader {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.unified-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #222;
  flex: 1;
}
.unified-actions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}
.unified-tags {
  flex-wrap: wrap;
  flex-shrink: 0;
  min-width: 0;
}
.unified-tag {
  background: #f5f7fa !important;
  color: #333 !important;
  border: 1px solid #e3eaf2 !important;
  font-size: 0.98rem;
  padding: 3px 12px 3px 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.unified-tag-label {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.unified-empty {
  color: #bbb;
  font-size: 1.02rem;
  margin-left: 40px;
  text-align: center;
  width: 100%;
  display: block;
  padding: 18px 0 8px 0;
}
.unified-dialog {
  border-radius: 10px;
}
.unified-dialog .el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.unified-dialog .el-form-item__label {
  min-width: 80px;
  text-align: right;
  padding-right: 8px;
  font-weight: 500;
  color: #333;
  font-size: 1em;
}
.unified-dialog .el-form-item__content {
  flex: 1;
  display: flex;
  align-items: center;
}
</style> 